<template>
  <the-list uri="/my/buys?state=took" ref="list0">
    <template v-slot:default="{ all }">
      <van-cell-group class="mt-4" v-for="row in all" :key="row.id">
        <van-cell value="">
          <template #title>
            <small class="text-sm text-gray-500">FCB</small>
            <van-icon
              class="mx-1 text-yellow-500 iconfont icon-bit-coin-line"
            ></van-icon>
            <big class="text-red-500">{{ row.coins }}</big>
          </template>
          <template #default>
            <small class="text-sm text-gray-500">收益</small>
            <van-icon
              class="mx-1 text-yellow-500 iconfont icon-bit-coin-line"
            ></van-icon>
            <big class="text-red-500">{{ profit(row.coins) }}</big>
          </template>
        </van-cell>
        <van-cell title="银行">
          <template #default>
            <span class="copy-btn" :data-clipboard-text="row.bank">{{
              row.bank
            }}</span>
          </template>
        </van-cell>
        <van-cell title="卡号">
          <template #default>
            <span class="copy-btn" :data-clipboard-text="row.bankcard">{{
              row.bankcard
            }}</span>
          </template>
        </van-cell>
        <van-cell title="姓名">
          <template #default>
            <span class="copy-btn" :data-clipboard-text="row.realname">{{
              row.realname
            }}</span>
          </template>
        </van-cell>

        <van-cell value="" :title="row.id">
          <template #default>
            <van-button
              size="small"
              type="default"
              @click="$emit('cancel', row)"
              >撤销</van-button
            >
            <van-button
              class="ml-1"
              size="small"
              type="primary"
              @click="$emit('finish', row)"
              >完成</van-button
            >
          </template>
          <template #label>
            <span class="ml-6">
              {{ row.updated_at }}
            </span>
          </template>
        </van-cell>
      </van-cell-group>
    </template>
  </the-list>
</template>

<script>
import theList from '../../components/list.vue'
import ClipboardJS from 'clipboard'
import XEUtils from 'xe-utils'

export default {
  components: {
    theList,
  },
  computed: {
    user() {
      return this.$store.state.user
    },
  },
  mounted() {
    let clipboard = new ClipboardJS('.copy-btn')

    clipboard.on('success', e => {
      // console.info('Action:', e.action)
      // console.info('Text:', e.text)
      // console.info('Trigger:', e.trigger)
      this.$toast.success('已复制')
      e.clearSelection()
    })

    clipboard.on('error', function(e) {
      console.error('Action:', e.action)
      console.error('Trigger:', e.trigger)
    })

    this.$once('hook:beforeDestroy', () => {
      clipboard.destroy()
    })
  },
  methods: {
    profit(coins) {
      const fee = XEUtils.multiply(coins, this.user.fee_ratio, 3)
      return XEUtils.add(fee, this.user.tip)
    },
    onRefresh() {
      this.$refs.list0.onRefresh()
    },
  },
}
</script>

<style>
</style>